<template>
  <div class="single-screen">
    <!-- 单屏幕内容 -->
    <div style="width: 100%;height: 600px">
      <VideoPlayer ref="VideoPlayer" ></VideoPlayer>
    </div>
  </div>
</template>
<script>
import VideoPlayer from '@/components/JessibucaVideo.vue'

export default {
  components:{VideoPlayer},
  props:{

    flvUrl:{
      type:String,
      required:true
    }
  },
  watch:{
    flvUrl(newVal,oldVal){
      this.$refs.VideoPlayer.play(newVal)
    },
  },

beforeDestroy() {
  this.$refs.VideoPlayer.destroy()
},
  data(){
    return{
      flvUrl(newVal, oldVal) {

      }
    }
  },
  methods:{
/*    pp(){
      console.log("a")
      // this.$refs.VideoPlayer.play(this.flvUrl)
    }*/
    play () {
      this.flvPlayer.play();
    },
}
}
</script>
<style scoped>
.single-screen {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;

}
</style>
